<template>
  <LeaveDateAndTimeSelector label="请假日期" :size="size" :leaveDuration="leaveDuration" v-model="leaveApplyDate" :disabled-dateStart="defaultDisabledDateStart" />
  <el-form-item label="开始时间" size="default" v-if="leaveDuration == 1">
    <el-space wrap>
      <el-time-picker v-model="leaveStartTime" format="HH:mm" placeholder="开始时间" @change="handleChangeLeaveStartTime" />
      <el-input-number v-if="!(leaveCategory == '2' && (useUsersStore().user as any).city == '长春')" v-model="hourDuration" :min="1" :max="8" @change="updateModelValue">
        <template #suffix>
          <span>小时</span>
        </template>
      </el-input-number>
    </el-space>
  </el-form-item>
  <template v-else-if="leaveDuration == 4">
    <LeaveDateAndTimeSelector label="结束日期" :size="size" :leaveDuration="leaveDuration" v-model="localEndDate" :disabled-dateStart="disabledDateStart" />
  </template>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useUsersStore } from '../../../stores'
import LeaveDateAndTimeSelector from './LeaveDateAndTimeSelector.vue'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  label: {
    type: String,
  },
  size: {
    type: String,
  },
  leaveDuration: {
    type: Number,
  },
  leaveCategory: {
    type: String,
  },
  modelValue: {
    type: Object as any,
  },
  defaultDisabledDateStart: {
    // 判断日期是否在当前日期之前
    type: Function as any,
    default: (_: Date) => {
      // const startOfDay = new Date()
      // startOfDay.setHours(0, 0, 0, 0)
      // const startOfDayTimestamp = startOfDay.getTime()

      // return time.getTime() < startOfDayTimestamp
      return false
    },
  },
})

const leaveStartTime = ref()
const leaveApplyDate = ref()
const localEndDate = ref()
const hourDuration = ref(1)

const handleChangeLeaveStartTime = () => {
  updateModelValue()
}

/**
 * 更新模型值
 *
 * 根据 leaveDuration 的值来更新模型的开始时间和结束时间。
 * 如果 leaveDuration 为 1，则根据 leaveApplyDate 和 leaveStartTime 计算开始时间和结束时间；
 * 如果 leaveDuration 不为 1，则根据 leaveApplyTimeOptions 和 leaveApplyTime 查找对应的开始时间和结束时间。
 *
 * @returns 无返回值
 */
const updateModelValue = async () => {
  // console.log('updateModelValue')
  // 如果请假时长为1天
  if (props.leaveDuration == 1) {
    if (leaveStartTime.value != null) {
      // 创建开始时间，以请假申请日期为基础
      const startTime = new Date(leaveApplyDate.value.startTime)
      // 设置开始时间为请假开始时间的小时和分钟
      startTime.setHours(leaveStartTime.value.getHours())
      startTime.setMinutes(leaveStartTime.value.getMinutes())

      // 创建结束时间，以开始时间为基础
      const endTime = new Date(startTime)
      // 结束时间为开始时间加1小时
      endTime.setHours(endTime.getHours() + hourDuration.value)

      // 触发update:modelValue事件，传递开始时间和结束时间
      emit('update:modelValue', { startTime, endTime, hourDuration: hourDuration.value })
    } else {
      emit('update:modelValue', { startTime: null, endTime: null, hourDuration: hourDuration.value })
    }
  } else if (props.leaveDuration == 4) {
    if (leaveApplyDate.value != null && localEndDate.value != null) {
      emit('update:modelValue', { startTime: leaveApplyDate.value.startTime, endTime: localEndDate.value.endTime, hourDuration: hourDuration.value })
    } else {
      emit('update:modelValue', { startTime: null, endTime: null, hourDuration: hourDuration.value })
    }
  } else {
    emit('update:modelValue', leaveApplyDate.value)
  }
}

/**
 * 判断给定日期是否在指定的开始日期之前
 *
 * @param time 需要判断的日期
 * @returns 如果 time 在指定的开始日期之前，则返回 true；否则返回 false
 */
const disabledDateStart = (time: Date) => {
  // console.log('disabledDateStart 1', time)
  let startOfDay = new Date()
  if (leaveApplyDate.value) {
    startOfDay = new Date(leaveApplyDate.value.startTime)
  }
  startOfDay.setHours(0, 0, 0, 0)
  startOfDay.setDate(startOfDay.getDate() + 1)
  const startOfDayTimestamp = startOfDay.getTime()
  return time.getTime() < startOfDayTimestamp
}
watch([() => props.leaveDuration, () => props.leaveDuration, () => leaveApplyDate.value, () => localEndDate.value], () => {
  updateModelValue()
})
</script>
